<template>
  <div class="dolls">
    <div class="right-con">
      <div class="con-tit mb30" @click="getlist">轮播图列表</div>
      <div class="con-in">
        <template>
          <el-table
            :data="tableList"
            :show-header="false"
            style="width: 100%">
            <el-table-column
              style="width: 100%">
              <template scope="props">
                <up-data :tr_data="props.row" v-on:loadlistfn="getlisted"></up-data>
              </template>
            </el-table-column>
          </el-table>
        </template>
        <div class="con-tit mb30 mt30">公告文案</div>
        <div class="fs14 mb15">
          恭喜
          <img src="../../assets/images/userimg.png" width="24" alt="">
          用户微信昵称抓到
          <img src="../../assets/images/goodimg.png" width="24" alt="">
          商品名称！
        </div>
        <div class="mb15">
          <el-row>
            <el-col :span="8">
              <el-input v-model="txtcon" resize="none" :rows="5" type="textarea"></el-input>
            </el-col>
            <el-col :span="8">
              <div class="mt10 fs12 pl15" style="line-height:1.2;color:#999">以“换行”为分隔，表示一句文案，每句字数不超过10个。<br>客户端会随机展示文案。</div>
            </el-col>
          </el-row>
        </div>
        <div>
          <el-button type="info" @click="setTxtCon">
            发布
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import api from '../../assets/js/api';
  import upData from '../common/upData';

  export default {
    name: "dolls",
    data() {
      return {
        urlData: null,
        showImg: true,
        dialogImageUrl: '',
        dialogVisible: false,
        tableList: null,
        txtcon: ''
      }
    },
    components: {
      upData
    },
    mounted: function () {
      this.getlist();
      this.getTxt();
    },
    methods: {
      getlisted: function () {
        this.getlist();
      },
      getlist: function () {
        this.loading = true;
        api.fetch('/api/admin/banners')
          .then(res => {
            if (res.data.length == 3) {
              this.tableList = res.data;
            } else {
              let resJson = [{ //默认json
                id: null,
                image: "",
                is_display: 1
              }, {
                id: null,
                image: "",
                is_display: 1
              }, {
                id: null,
                image: "",
                is_display: 1
              }]
              this.tableList = this.jsonDiff(resJson, res.data)
            }
          }).catch();
      },
      jsonDiff: function (objA, objB) { //json 匹配
        for (let i = 0; i < objB.length; i++) { //初始匹配
          objA[i].image = objB[i].image;
          if (objB[i].is_display == 0) {
            objA[i].is_display = false;
          } else {
            objA[i].is_display = true;
          }
          objA[i].id = objB[i].id;
        }
        return objA;
      },
      getTxt: function () {
        api.fetch('/api/admin/options')
          .then(res => {
            this.txtcon=res.data.doll_records_sentences;
          }).catch();
      },
      setTxtCon: function () {
        let sub_ok = true;
        let txtArry = [];
        txtArry = this.txtcon.split('\n');
        for (let i = 0; i < txtArry.length; i++) {
          if (txtArry[i].length > 10) {
            this.$message.error('第' + (i + 1) + '句超过了10个字！');
            sub_ok = false;
          }
        }
        if (sub_ok == true) {
          api.fetch('/api/admin/options', {
              method: 'POST',
              data: {
                doll_records_sentences: this.txtcon
              }
            })
            .then(res => {
              this.$message({
                message: '设置成功！',
                type: 'success'
              });
            }).catch();
        }
      }
    }
  }
</script>

<style scoped>
  .dolls {
    height: 100%;
  }
</style>
